<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="status-bar"></view>
			<view class="nav-bar">
				<view class="back-btn" @click="backPage()">
					<view class="back-icon"></view>
				</view>
				<view class="title">订单管理</view>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<text>输入需要搜索的内容</text>
				<text class="search-icon">&#xe61c;</text>
			</view>
		</view>

		<!-- 状态栏 -->
		<view class="status-bar-info">
			<view class="total-count">共{{orderlist.length}}条</view>
			<view class="filter">
				<text>待服务</text>
				<text class="down-arrow">&#xe65e;</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in orderlist" :key="index">
				<view class="order-header">
					<view class="order-number">订单号:{{item.id}}</view>
					<view class="order-price">￥{{item.price}}</view>
				</view>
				<view class="order-content">
					<view class="order-info">下单用户: {{item.uid}}</view>
					<view class="order-info">预约时间: {{item.reservationTime}}</view>
					<view class="order-footer">
						<view class="order-time">下单时间:{{item.payTime}}</view>
						<view class="order-detail-btn" @click="toDetail(item.id)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onMounted
	} from 'vue';
	import request from '/utils/request.js';
	const id = ref()

	function toDetail(id) {
		
		uni.navigateTo({
			url: '/pages/index/dingdanguanli/dingdanxiangqing/dingdanxiangqing?id='+id
		})
		
	}
	
	
	

	function backPage() {
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		mid: null,
		uid: null,
		serviceTypeId: null,
		orderTime: null,
		reservationTime: null,
		payType: null,
		status: null,
	});
	
	const orderlist = ref([])

	function list() {
		request({
			url: '/yyq/orders/list',
			method: 'GET',
			data: queryParams.value,
			success(res) {
				orderlist.value = res.data.rows;
				console.log(orderlist.value);
			}

		})
	}
	onMounted(() => {
		const info = uni.getStorageSync('info', {
			sessionStorage: true
		});
		console.log(info.mid);
		queryParams.value.mid = info.mid;
		console.log(queryParams.value.mid)
		list(); 
	});
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		background: #1989fa;
		color: #fff;
		position: relative;
	}

	.status-bar {
		height: 25px;
	}




	.nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 15px;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.back-icon {
		width: 30px;
		height: 30px;
		position: relative; 
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 40rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 30rpx;
		left: 30rpx;
	}


	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.right {
		display: flex;
		align-items: center;
	}

	.dot-menu {
		display: flex;
		margin-right: 10px;
	}

	.dot {
		width: 4px;
		height: 4px;
		background-color: #fff;
		border-radius: 50%;
		margin: 0 2px;
	}

	.circle-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.target-icon {
		font-size: 18px;
	}

	.search-box {
		padding: 10px 20px;
		background-color: #1989fa;
	}

	.search-input {
		background-color: #fff;
		height: 36px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		color: #999;
	}

	.search-icon {
		color: #1989fa;
	}

	.status-bar-info {
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		color: #666;
	}

	.filter {
		display: flex;
		align-items: center;
	}

	.down-arrow {
		margin-left: 5px;
	}

	.order-list {
		padding: 0 15px;
	}

	.order-item {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.order-price {
		color: #ff5722;
	}

	.order-content {
		padding: 15px;
	}

	.order-info {
		line-height: 25px;
		color: #333;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		align-items: center;
	}

	.order-time {
		color: #999;
	}

	.order-detail-btn {
		background-color: #1989fa;
		color: #fff;
		padding: 8px 15px;
		border-radius: 15px;
	}
</style>